<template>
	<view class="container">
		<uni-segmented-control class="header" :current="current" :values="items" style-type="button"
			active-color="#007aff" @clickItem="onClickItem" />
		<scroll-view scroll-y class="footer">
			<view class="book-list">
				<view v-for="(book ,index) in bookList" :index="index" :key="book.id" class="item">
					<image :src="book.imgSrc" class="item-img" mode="aspectFill"></image>
					<text class="item-bookName">{{book.bookName}}</text>
					<view class="item-process">
						<progress :percent="percent" activeColor="#17b00a" backgroundColor="#c32204" stroke-width="5"
							class="chart" />
						<text class="count">1372</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script setup lang="ts">
	import { ref } from 'vue'
	const percent = ref(60)
	const current = ref(0)
	const items = ['入门1', '初级2', '中级3', '进阶4', '高级5']
	const bookList = ref(Array(15).fill(0).map((_, index) => {
		return {
			id: index,
			imgSrc: '../../static/image/page.png',
			bookName: '神奇树屋',
			process: index * 10
		}
	}))

	function onClickItem(e) {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;

		.header {
			height: 100rpx;
		}

		.footer {
			overflow-y: hidden;
			margin-top: 20rpx;
		}
	}

	.progress-box {
		display: flex;
		height: 50rpx;
		margin-bottom: 60rpx;
	}

	.book-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16rpx;
		margin-top: 8rpx;

		.item {
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 12rpx;

			&-img {
				width: 200rpx;
				height: 270rpx;
			}

			&-process {
				display: flex;
				justify-content: space-between;
				column-gap: 10rpx;
				width: 200rpx;

				.chart {
					width: 120rpx;

				}

				.count {
					color: #c32204;
				}
			}
		}
	}
</style>